<template>
  <div class="myform" :style="{ height: height || '100%' }">
    <el-scrollbar :style="{ background: formBgColor }">
      <el-form
        ref="formRef"
        :model="saveFormData"
        :label-position="labelPosition"
        :label-width="labelWidth"
        v-loading="saveBtnLoading"
        :disabled="formDisabled"
        :size="size"
        :rules="formRules"
        class="my-el-form"
      >
        <div class="myformPopBox">
          <div
            v-for="(item, index) in formColumns"
            :key="`form_${index}`"
            :style="{
              position: 'relative',
              background: background || '#e9e9e94f',
              border: porpModel && !item.hide ? '1px solid #dcdfe654' : 'none',
              borderRadius: '4px',
              marginBottom: '10px',
            }"
          >
            <template v-if="!item.hide">
              <div
                class="form-nav"
                v-if="porpModel"
                @click="onPorpHide(item, !item.propHide)"
              >
                <div class="form-nav-left">
                  <i class="form-head-tag"></i>
                  <h3 class="form-head-title" v-if="item.title">
                    {{ $t(item.title || "") }}
                  </h3>
                  <slot name="form-head-right-slot"></slot>
                </div>
                <div class="form-nav-right">
                  <el-icon
                    :style="{
                      transform: `rotateZ(${
                        item.propHide ? '180deg' : '0deg'
                      })`,
                    }"
                    size="16px"
                  >
                    <ArrowUp />
                  </el-icon>
                  <slot name="form-nav-right"></slot>
                </div>
              </div>
              <div class="form-prop" :ref="(el) => (item._popEl = el)">
                <el-scrollbar>
                  <div
                    v-for="(black, blackIndex) in item.structure"
                    :key="`form-prop-${index}-${blackIndex}`"
                    style="margin: 10px; background: #fff; border-radius: 5px"
                  >
                    <div v-if="!black.hide">
                      <div class="form-prop-nav" v-if="black.title">
                        <div class="form-prop-nav-left">
                          <h5 class="form-head-title">
                            {{ $t(black.title || "") }}
                          </h5>
                          <slot name="form-prop-nav-left-slot"></slot>
                        </div>
                        <div class="form-prop-nav-right">
                          <slot name="form-prop-nav-right-slot"></slot>
                          <el-icon
                            :style="{
                              transform: `rotateZ(${
                                !black.propHide ? '180deg' : '0deg'
                              })`,
                            }"
                            size="16px"
                            @click="black.propHide = !black.propHide"
                          >
                            <ArrowUp />
                          </el-icon>
                        </div>
                      </div>
                      <div
                        :style="{
                          height: !black.propHide ? 'auto' : '0px',
                          overflow: 'hidden',
                        }"
                      >
                        <div v-if="black.content">
                          <el-row
                            v-if="black.formLayout === 'el-row'"
                            :gutter="gutter"
                            style="padding: 10px 0; width: 100%"
                          >
                            <template
                              v-for="(c, cindex) in black.content"
                              :key="`form_${index}_${cindex}`"
                            >
                              <el-col
                                v-if="!c.hide"
                                :xs="c.span || 24"
                                :sm="c.span || 12"
                                :md="c.span || 12"
                                :lg="c.span || 8"
                                :xl="c.xl || c.span || 6"
                                :offset="c.offset"
                              >
                                <el-form-item
                                  :label="$t(c.label || '')"
                                  :prop="c.prop"
                                  :label-width="c.labelWidth"
                                >
                                  <div style="flex: 1">
                                    <FormItem
                                      :c="c"
                                      v-model:formData="saveFormData"
                                      @handleAutocompleteSelect="
                                        handleAutocompleteSelect
                                      "
                                      @handleAutocompleteClear="
                                        handleAutocompleteClear
                                      "
                                      @handleSelectChange="handleSelectChange"
                                      @onEmpselectFocus="onEmpselectFocus"
                                      @radioChange="radioChange"
                                      @onChangeCheckbox="onChangeCheckbox"
                                      @handleRemoteChange="handleRemoteChange"
                                      @handleRemoteClear="handleRemoteClear"
                                      @handleNodeClick="handleNodeClick"
                                      @onTreeCancel="onTreeCancel"
                                      @sizeTeerSelectionChange="
                                        sizeTeerSelectionChange
                                      "
                                      @onPropSelectClose="onPropSelectClose"
                                      @onPropSelectChange="onPropSelectChange"
                                      @onCascaderClose="onCascaderClose"
                                      @onCascaderChange="onCascaderChange"
                                      @handleLabelUpload="handleLabelUpload"
                                      @handleClose="handleClose"
                                      @handleSelectionChange="
                                        handleSelectionChange
                                      "
                                      @handleEditClosed="handleEditClosed"
                                      @onDelete="onDelete"
                                      @onAdd="onAdd"
                                    >
                                      <template v-if="c.type === 'slot'">
                                        <slot :name="`form-${c.prop}`"></slot>
                                      </template>
                                    </FormItem>
                                  </div>
                                  <div v-if="c.buttonTitle">
                                    <el-button
                                      size="small"
                                      @click="c.buttonClick"
                                      >{{ $t("buttonTitle") }}</el-button
                                    >
                                  </div>
                                  <el-tooltip
                                    v-if="c.content"
                                    effect="dark"
                                    placement="top"
                                  >
                                    <template #content>
                                      <span
                                        :style="{ color: c.color || '#fff' }"
                                        >{{ $t(c.content || "") }}</span
                                      >
                                    </template>
                                    <el-icon size="16px"
                                      ><InfoFilled
                                    /></el-icon>
                                  </el-tooltip>
                                </el-form-item>
                              </el-col>
                            </template>
                          </el-row>
                          <el-row
                            v-else-if="black.formLayout === 'el-row-column'"
                            :gutter="gutter"
                            style="padding: 10px 0; width: 100%"
                          >
                            <template
                              v-for="(content, cindex) in black.content"
                              :key="`form_${index}_${cindex}`"
                            >
                              <el-col
                                :xs="content.xs || content.span || 24"
                                :sm="content.sm || content.span || 12"
                                :md="content.md || content.span || 12"
                                :lg="content.lg || content.span || 8"
                                :xl="content.xl || content.span || 6"
                                :offset="content.offset"
                              >
                                <div v-if="content.type === 'el_column_list'">
                                  <el-form-item
                                    v-if="content.lable || content.buttonAdd"
                                    :label="content.lable"
                                  >
                                    <div v-if="content.buttonAdd">
                                      <el-button
                                        size="small"
                                        @click="listButtonAdd(content)"
                                        :disabled="
                                          listButtonAddDisabled(content)
                                        "
                                      >
                                        {{ $t("添加") }}
                                      </el-button>
                                    </div>
                                    <div v-if="content.icon">
                                      <i
                                        v-if="!content.iconShow"
                                        @click="
                                          content.iconShow = !content.iconShow
                                        "
                                        style="cursor: pointer"
                                      >
                                        <SvgIcon
                                          :icon-class="cSvgIcon.common.TAG_PLUS"
                                        />
                                      </i>
                                      <i
                                        v-else
                                        @click="
                                          content.iconShow = !content.iconShow
                                        "
                                        style="cursor: pointer"
                                      >
                                        <SvgIcon
                                          :icon-class="
                                            cSvgIcon.common.TAG_REDUCE
                                          "
                                        />
                                      </i>
                                    </div>
                                  </el-form-item>
                                  <template v-if="!content.iconShow">
                                    <template
                                      v-for="(
                                        listItem, listIndex
                                      ) in saveFormData[content.prop]"
                                      :key="`form_${index}_${listIndex}`"
                                    >
                                      <el-form-item
                                        :label="content.labelRow || '-'"
                                      >
                                        <el-icon
                                          @click="
                                            listButtonRemove(content, listIndex)
                                          "
                                          style="
                                            margin-right: 10px;
                                            cursor: pointer;
                                          "
                                          ><Delete
                                        /></el-icon>
                                        <i
                                          v-if="!listItem.iconShow"
                                          @click="
                                            listItem.iconShow =
                                              !listItem.iconShow
                                          "
                                          style="cursor: pointer"
                                        >
                                          <SvgIcon
                                            :icon-class="
                                              cSvgIcon.common.TAG_PLUS
                                            "
                                          />
                                        </i>
                                        <i
                                          v-else
                                          @click="
                                            listItem.iconShow =
                                              !listItem.iconShow
                                          "
                                          style="cursor: pointer"
                                        >
                                          <SvgIcon
                                            :icon-class="
                                              cSvgIcon.common.TAG_REDUCE
                                            "
                                          />
                                        </i>
                                        <div
                                          class="list-label-value"
                                          v-if="listItem.iconShow"
                                        >
                                          {{
                                            listLabelValue(
                                              listItem,
                                              content.labelKey
                                            )
                                          }}
                                        </div>
                                      </el-form-item>
                                      <el-row
                                        v-if="!listItem.iconShow"
                                        :gutter="gutter"
                                        style="padding: 10px 0; width: 100%"
                                      >
                                        <template
                                          v-for="(c, cindex) in content.content"
                                          :key="`form_${index}_${cindex}_${listIndex}`"
                                        >
                                          <el-col
                                            v-if="!c.hide"
                                            :xs="c.span || 24"
                                            :sm="c.span || 12"
                                            :md="c.span || 12"
                                            :lg="c.span || 8"
                                            :xl="c.xl || c.span || 6"
                                            :offset="c.offset"
                                          >
                                            <el-form-item
                                              :label="$t(c.label || '')"
                                              :prop="`${content.prop}.${listIndex}.${c.prop}`"
                                              :label-width="c.labelWidth"
                                              :rules="c.rules || []"
                                            >
                                              <div style="flex: 1">
                                                <FormItem
                                                  :c="c"
                                                  v-model:formData="
                                                    saveFormData[content.prop][
                                                      listIndex
                                                    ]
                                                  "
                                                  @handleAutocompleteSelect="
                                                    handleAutocompleteSelect
                                                  "
                                                  @handleAutocompleteClear="
                                                    handleAutocompleteClear
                                                  "
                                                  @handleSelectChange="
                                                    handleSelectChange
                                                  "
                                                  @onEmpselectFocus="
                                                    onEmpselectFocus
                                                  "
                                                  @radioChange="radioChange"
                                                  @onChangeCheckbox="
                                                    onChangeCheckbox
                                                  "
                                                  @handleRemoteChange="
                                                    handleRemoteChange
                                                  "
                                                  @handleRemoteClear="
                                                    handleRemoteClear
                                                  "
                                                  @handleNodeClick="
                                                    handleNodeClick
                                                  "
                                                  @onTreeCancel="onTreeCancel"
                                                  @sizeTeerSelectionChange="
                                                    sizeTeerSelectionChange
                                                  "
                                                  @onPropSelectClose="
                                                    onPropSelectClose
                                                  "
                                                  @onPropSelectChange="
                                                    onPropSelectChange
                                                  "
                                                  @onCascaderClose="
                                                    onCascaderClose
                                                  "
                                                  @onCascaderChange="
                                                    onCascaderChange
                                                  "
                                                  @handleLabelUpload="
                                                    handleLabelUpload
                                                  "
                                                  @handleClose="handleClose"
                                                  @handleSelectionChange="
                                                    handleSelectionChange
                                                  "
                                                  @handleEditClosed="
                                                    handleEditClosed
                                                  "
                                                  @onDelete="onDelete"
                                                  @onAdd="onAdd"
                                                >
                                                  <template
                                                    v-if="c.type === 'slot'"
                                                  >
                                                    <slot
                                                      :name="`form-${c.prop}-${listIndex}`"
                                                    ></slot>
                                                  </template>
                                                </FormItem>
                                              </div>
                                              <div v-if="c.buttonTitle">
                                                <el-button
                                                  size="small"
                                                  @click="c.buttonClick"
                                                  >{{
                                                    $t("buttonTitle")
                                                  }}</el-button
                                                >
                                              </div>
                                              <el-tooltip
                                                v-if="c.content"
                                                effect="dark"
                                                placement="top"
                                              >
                                                <template #content>
                                                  <span
                                                    :style="{
                                                      color: c.color || '#fff',
                                                    }"
                                                    >{{
                                                      $t(c.content || "")
                                                    }}</span
                                                  >
                                                </template>
                                                <el-icon size="16px"
                                                  ><InfoFilled
                                                /></el-icon>
                                              </el-tooltip>
                                            </el-form-item>
                                          </el-col>
                                        </template>
                                      </el-row>
                                    </template>
                                  </template>
                                </div>
                                <div v-else-if="content.type === 'el_label_tabel'">
                                  <div
                                    style="
                                      padding: 10px 5px 0;
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: end;
                                    "
                                  >
                                    <div>
                                      <ButtonGroup
                                        :buttonType="content.buttonType"
                                        @delete="onDelete(content)"
                                        @add="onAdd(content, content.tableIndex)"
                                        :disabledEdit="
                                          content.multipleSelection.length != 1
                                        "
                                        :disabledDelete="
                                          content.batchDelete
                                            ? content.multipleSelection.length === 0
                                            : content.multipleSelection.length != 1
                                        "
                                        :hasPermiAdd="content.hasPermiAdd"
                                        :hasPermiDelete="content.hasPermiDelete"
                                      ></ButtonGroup>
                                    </div>
                                  </div>
                                  <div style="padding: 10px 5px">
                                    <MyTable
                                      ref="myTabel"
                                      :tableId="content.tableId"
                                      :columns="content.columns || []"
                                      :setHeight="content.height || 200"
                                      :loading="loading"
                                      :edit-rules="content.editRules"
                                      :keepSource="content.keepSource"
                                      :columnMinWidth="content.columnMinWidth || 200"
                                      :changeEditNeedTrigger="
                                        content.changeEditNeedTrigger
                                      "
                                      :keepSourceKey="content.keepSourceKey"
                                      :edit-config="{
                                        trigger: 'click',
                                        mode: 'row',
                                        showStatus: false,
                                        enabled: hasPermi(content.hasPermiEdit),
                                      }"
                                      :dataSource="saveFormData[content.prop]"
                                      @handle-selection-change="
                                        handleSelectionChange($event, content)
                                      "
                                      @handleEditClosed="
                                        (
                                          row,
                                          rowIndex,
                                          resolve,
                                          reject,
                                          xGrid
                                        ) => {
                                          handleEditClosed(
                                            row,
                                            rowIndex,
                                            resolve,
                                            reject,
                                            content,
                                            xGrid
                                          );
                                        }
                                      "
                                    ></MyTable>
                                  </div>
                                </div>
                                <el-row v-else>
                                  <el-col
                                    v-for="(c, cindex) in content.content"
                                    :key="`form_${index}_${cindex}`"
                                    :span="c.span || 24"
                                  >
                                    <el-form-item
                                      :label="$t(c.label || '')"
                                      :prop="c?.prop"
                                      :label-width="c.labelWidth"
                                    >
                                      <div style="flex: 1">
                                        <FormItem
                                          :c="c"
                                          v-model:formData="saveFormData"
                                          @handleAutocompleteSelect="
                                            handleAutocompleteSelect
                                          "
                                          @handleAutocompleteClear="
                                            handleAutocompleteClear
                                          "
                                          @handleSelectChange="
                                            handleSelectChange
                                          "
                                          @onEmpselectFocus="onEmpselectFocus"
                                          @radioChange="radioChange"
                                          @onChangeCheckbox="onChangeCheckbox"
                                          @handleRemoteChange="
                                            handleRemoteChange
                                          "
                                          @handleRemoteClear="handleRemoteClear"
                                          @handleNodeClick="handleNodeClick"
                                          @onTreeCancel="onTreeCancel"
                                          @sizeTeerSelectionChange="
                                            sizeTeerSelectionChange
                                          "
                                          @onPropSelectClose="onPropSelectClose"
                                          @onPropSelectChange="
                                            onPropSelectChange
                                          "
                                          @onCascaderClose="onCascaderClose"
                                          @onCascaderChange="onCascaderChange"
                                          @handleLabelUpload="handleLabelUpload"
                                          @handleClose="handleClose"
                                          @handleSelectionChange="
                                            handleSelectionChange
                                          "
                                          @handleEditClosed="handleEditClosed"
                                          @onDelete="onDelete"
                                          @onAdd="onAdd"
                                        >
                                          <template v-if="c.type === 'slot'">
                                            <slot
                                              :name="`form-${c.prop}`"
                                            ></slot>
                                          </template>
                                        </FormItem>
                                      </div>
                                      <div v-if="c.buttonTitle">
                                        <el-button
                                          size="small"
                                          @click="c.buttonClick"
                                          >{{ $t(c.buttonTitle) }}</el-button
                                        >
                                      </div>
                                      <el-tooltip
                                        v-if="c.content"
                                        effect="dark"
                                        placement="top"
                                      >
                                        <template #content>
                                          <span
                                            :style="{
                                              color: c.color || '#fff',
                                            }"
                                            >{{ $t(c.content || "") }}</span
                                          >
                                        </template>
                                        <el-icon size="16px"
                                          ><InfoFilled
                                        /></el-icon>
                                      </el-tooltip>
                                    </el-form-item>
                                  </el-col>
                                </el-row>
                              </el-col>
                            </template>
                          </el-row>
                          <GridLayout
                            v-else
                            :col-num="24"
                            :row-height="30"
                            v-model:layout="black.content"
                            :is-resizable="false"
                            :is-draggable="black.isDraggable"
                            auto-size
                            :use-css-transforms="false"
                            :margin="[0, 2]"
                            style="padding: 10px; margin: 0; width: 100%"
                          >
                            <template v-for="c in black.content" :key="c.i">
                              <GridItem
                                v-if="!c.hide"
                                :x="c.x"
                                :y="c.y"
                                :w="c.w"
                                :h="c.h"
                                :i="c.i"
                                drag-allow-from=".vue-draggable-handle"
                              >
                                <div
                                  class="vue-draggable-handle"
                                  v-if="black.isDraggable"
                                >
                                  <Svg-icon
                                    icon-class="icon-drag"
                                    size="20px"
                                  />
                                </div>
                                <el-form-item
                                  :label="$t(c.label || '')"
                                  :prop="c.prop"
                                  :label-width="c.labelWidth"
                                >
                                  <div style="flex: 1">
                                    <FormItem
                                      :c="c"
                                      v-model:formData="saveFormData"
                                      @handleAutocompleteSelect="
                                        handleAutocompleteSelect
                                      "
                                      @handleAutocompleteClear="
                                        handleAutocompleteClear
                                      "
                                      @handleSelectChange="handleSelectChange"
                                      @onEmpselectFocus="onEmpselectFocus"
                                      @radioChange="radioChange"
                                      @onChangeCheckbox="onChangeCheckbox"
                                      @handleRemoteChange="handleRemoteChange"
                                      @handleRemoteClear="handleRemoteClear"
                                      @handleNodeClick="handleNodeClick"
                                      @onTreeCancel="onTreeCancel"
                                      @sizeTeerSelectionChange="
                                        sizeTeerSelectionChange
                                      "
                                      @onPropSelectClose="onPropSelectClose"
                                      @onPropSelectChange="onPropSelectChange"
                                      @onCascaderClose="onCascaderClose"
                                      @onCascaderChange="onCascaderChange"
                                      @handleLabelUpload="handleLabelUpload"
                                      @handleClose="handleClose"
                                      @handleSelectionChange="
                                        handleSelectionChange
                                      "
                                      @handleEditClosed="handleEditClosed"
                                      @onDelete="onDelete"
                                      @onAdd="onAdd"
                                    >
                                      <template v-if="c.type === 'slot'">
                                        <slot :name="`form-${c.prop}`"></slot>
                                      </template>
                                    </FormItem>
                                  </div>
                                  <div v-if="c.buttonTitle">
                                    <el-button
                                      size="small"
                                      @click="c.buttonClick"
                                      >{{ $t("buttonTitle") }}</el-button
                                    >
                                  </div>
                                  <el-tooltip
                                    v-if="c.content"
                                    effect="dark"
                                    placement="top"
                                  >
                                    <template #content>
                                      <span
                                        :style="{ color: c.color || '#fff' }"
                                        >{{ $t(c.content || "") }}</span
                                      >
                                    </template>
                                    <el-icon size="16px"
                                      ><InfoFilled
                                    /></el-icon>
                                  </el-tooltip>
                                </el-form-item>
                              </GridItem>
                            </template>
                          </GridLayout>
                        </div>
                        <div v-else-if="black.type === 'tabs-tabel'">
                          <div style="padding: 0 5px">
                            <el-radio-group
                              v-model="saveFormData[black.propType]"
                              @change="onTabChange($event, black)"
                            >
                              <el-radio-button
                                v-for="tag in black.tabsOptins"
                                :key="tag.value"
                                :value="tag.value"
                                >{{ $t(tag.label) }}</el-radio-button
                              >
                            </el-radio-group>
                          </div>
                          <div
                            v-if="route.query.type !== 'view'"
                            style="
                              height: 40px;
                              display: flex;
                              justify-content: space-between;
                              align-items: end;
                            "
                          >
                            <div>
                              <ButtonGroup
                                :buttonType="
                                  black.tabelParams[
                                    saveFormData[black.propType]
                                  ].buttonType
                                "
                                @delete="
                                  onDelete(
                                    black.tabelParams[
                                      saveFormData[black.propType]
                                    ]
                                  )
                                "
                                @add="
                                  onAdd(
                                    black.tabelParams[
                                      saveFormData[black.propType]
                                    ],
                                    black.tableIndex
                                  )
                                "
                                :disabledEdit="
                                  black.tabelParams[
                                    saveFormData[black.propType]
                                  ].multipleSelection.length != 1
                                "
                                :disabledDelete="
                                  black.tabelParams[
                                    saveFormData[black.propType]
                                  ].batchDelete
                                    ? black.tabelParams[
                                        saveFormData[black.propType]
                                      ].multipleSelection.length === 0
                                    : black.tabelParams[
                                        saveFormData[black.propType]
                                      ].multipleSelection.length != 1
                                "
                                :hasPermiAdd="black.hasPermiAdd"
                                :hasPermiDelete="black.hasPermiDelete"
                              ></ButtonGroup>
                            </div>
                          </div>
                          <div style="padding: 10px 5px">
                            <MyTable
                              ref="myTabel"
                              :changeEditNeedTrigger="
                                black.tabelParams[saveFormData[black.propType]]
                                  .changeEditNeedTrigger
                              "
                              :tableId="
                                black.tabelParams[saveFormData[black.propType]]
                                  .tableId
                              "
                              :columns="
                                black.tabelParams[saveFormData[black.propType]]
                                  .columns || []
                              "
                              :setHeight="
                                black.tabelParams[saveFormData[black.propType]]
                                  .height || 200
                              "
                              :loading="loading"
                              :edit-rules="
                                black.tabelParams[saveFormData[black.propType]]
                                  .editRules
                              "
                              :keepSource="
                                black.tabelParams[saveFormData[black.propType]]
                                  .keepSource
                              "
                              :columnMinWidth="
                                black.tabelParams[saveFormData[black.propType]]
                                  .columnMinWidth || 200
                              "
                              :keepSourceKey="
                                black.tabelParams[saveFormData[black.propType]]
                                  .keepSourceKey
                              "
                              :edit-config="{
                                trigger: 'click',
                                mode: 'row',
                                showStatus: false,
                                enabled: hasPermi(black.hasPermiEdit),
                              }"
                              :dataSource="
                                saveFormData[
                                  black.tabelParams[
                                    saveFormData[black.propType]
                                  ].prop
                                ]
                              "
                              @handle-selection-change="
                                handleSelectionChange(
                                  $event,
                                  black.tabelParams[
                                    saveFormData[black.propType]
                                  ]
                                )
                              "
                              @handleEditClosed="
                                (row, rowIndex, resolve, reject, xGrid) => {
                                  handleEditClosed(
                                    row,
                                    rowIndex,
                                    resolve,
                                    reject,
                                    black.tabelParams[
                                      saveFormData[black.propType]
                                    ],
                                    xGrid
                                  );
                                }
                              "
                            ></MyTable>
                          </div>
                        </div>
                        <div v-else>
                          <div
                            v-if="route.query.type !== 'view'"
                            style="
                              padding: 10px 5px 0;
                              display: flex;
                              justify-content: space-between;
                              align-items: end;
                            "
                          >
                            <div>
                              <ButtonGroup
                                :buttonType="black.buttonType"
                                @delete="onDelete(black)"
                                @add="onAdd(black, black.tableIndex)"
                                :disabledEdit="
                                  black.multipleSelection.length != 1
                                "
                                :disabledDelete="
                                  black.batchDelete
                                    ? black.multipleSelection.length === 0
                                    : black.multipleSelection.length != 1
                                "
                                :hasPermiAdd="black.hasPermiAdd"
                                :hasPermiDelete="black.hasPermiDelete"
                              ></ButtonGroup>
                            </div>
                          </div>
                          <div style="padding: 10px 5px">
                            <MyTable
                              ref="myTabel"
                              :tableId="black.tableId"
                              :columns="black.columns || []"
                              :setHeight="black.height || 200"
                              :loading="loading"
                              :edit-rules="black.editRules"
                              :keepSource="black.keepSource"
                              :columnMinWidth="black.columnMinWidth || 200"
                              :changeEditNeedTrigger="
                                black.changeEditNeedTrigger
                              "
                              :keepSourceKey="black.keepSourceKey"
                              :edit-config="{
                                trigger: 'click',
                                mode: 'row',
                                showStatus: false,
                                enabled: hasPermi(black.hasPermiEdit),
                              }"
                              :dataSource="saveFormData[black.prop]"
                              @handle-selection-change="
                                handleSelectionChange($event, black)
                              "
                              @handleEditClosed="
                                (row, rowIndex, resolve, reject, xGrid) => {
                                  handleEditClosed(
                                    row,
                                    rowIndex,
                                    resolve,
                                    reject,
                                    black,
                                    xGrid
                                  );
                                }
                              "
                            ></MyTable>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </template>
          </div>
        </div>
      </el-form>
    </el-scrollbar>
    <div
      class="form-buttons"
      v-if="formButtons"
      :style="{ 'justify-content': justifyContentBut || 'center' }"
    >
      <el-button type="default" @click="emitCloseEvent">
        {{ cancelText || $t("取消") }}
      </el-button>
      <el-button
        v-hasPermi="hasPermiEdit"
        :loading="saveBtnLoading"
        :type="saveType || 'primary'"
        @click="onSubmit(formRef)"
      >
        {{ saveText || $t("保存") }}
      </el-button>
    </div>
    <EmployeeSelection
      v-if="employeeSelectionVisible"
      v-model:visible="employeeSelectionVisible"
      :multiple="propsSelect.multiple"
      :currRowKey="propsSelect.currRowKey"
      :rowKey="propsSelect.rowKey"
      :currRowServer="propsSelect.currRowServer"
      :columns="propsSelect.columns || []"
      @onSubmit="employeeSelectiSubmit"
    ></EmployeeSelection>
  </div>
</template>

<script setup>
import { ref, defineEmits, watch, computed, onMounted, nextTick } from "vue";
import { GridLayout, GridItem } from "grid-layout-plus";
import { Edit, View } from "@element-plus/icons-vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { cSvgIcon } from "@/consts/index";
import {
  columnFilters,
  fileViewing,
  closeTag,
  hasPermi,
} from "@/utils/mUtils.js";
import { useRoute } from "vue-router";
import { template } from "xe-utils";
const route = useRoute();
const emits = defineEmits(["submit", "update:formData", "cancel"]);
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  columns: {
    type: Array,
    default: () => [],
  },
  rules: {
    type: Object,
    default: () => ({}),
  },
  labelPosition: {
    type: String,
    default: "right",
  },
  labelWidth: {
    type: String,
    default: "80px",
  },
  size: {
    type: String,
    default: "small",
  },
  gutter: {
    type: Number,
    default: 10,
  },
  formButtons: {
    type: Boolean,
    default: true,
  },
  saveType: {
    type: String,
    default: "primary",
  },
  cancelText: {
    type: String,
    default: "",
  },
  saveText: {
    type: String,
    default: "",
  },
  justifyContentBut: {
    type: String,
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  saveBtnLoading: {
    type: Boolean,
    default: false,
  },
  formDisabled: {
    type: Boolean,
    default: false,
  },
  porpModel: {
    type: Boolean,
    default: false,
  },
  background: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  expandConfiguration: {
    type: Array,
    default: () => [0, 1],
  },
  isCalculateLayout: {
    type: Boolean,
    default: false,
  },
  formBgColor: {
    type: String,
    default: "none",
  },
  hasPermiEdit: {
    type: Array,
    default: () => [],
  },
});
const layout = ref({});
const formRef = ref();
const formRules = computed(() => {
  return props.rules;
});
const formColumns = computed(() => props.columns);

const saveFormData = computed({
  get() {
    return props.formData;
  },
  set(val) {
    emits("update:formData", val);
  },
});

const sizeTeerSelectionChange = (row, c) => {
  onTreeCancel(c);
  if (!row.length) return;
  saveFormData.value[c.prop] = row;
  c.checkedRowKeys = row.map((item) => item[c.rowId || "id"]);
  saveFormData.value[c.textProp] = row
    .map((item) => item[c.rowName || "label"])
    .join(",");
  c.handleSelectionChange && c.handleSelectionChange(row, c);
};
const handleNodeClick = (node, c) => {
  saveFormData.value[c.code] = node[c.props.value];
  saveFormData.value[c.prop] = node[c.props.label];
  c.visible = false;
};
const onChangeCheckbox = (value, c) => {
  const arr = [];
  value.forEach((item) => {
    const obj = c.options.find((i) => i[c.props.value] === item);
    if (obj) {
      const data = {};
      for (const key in c.propCheckKey) {
        data[key] = obj[c.propCheckKey[key]];
      }
      arr.push(data);
    }
  });
  saveFormData.value[c.propCheck] = arr;
  c.onChange && c.onChange(value, c);
};
const handleSelectChange = (value, c) => {
  if (!value) {
    saveFormData.value[c.name] = null;
    return;
  }
  if (c.name && !c.multiple) {
    saveFormData.value[c.name] = c.options.find(
      (item) => item[c.props.value] === value
    )[c.props.label];
  }
  if (c.multipleProps) {
    saveFormData.value[c.multipleProp] = value.map((item) => {
      const obj = c.options.find((ite) => ite[c.props.value] === item);
      const data = {};
      for (const key in c.multipleProps) {
        data[key] = obj[c.multipleProps[key]];
      }
      return data;
    });
  } else if (c.multiple) {
    saveFormData.value[c.name] = c.options
      .filter((item) => value.includes(item[c.props.value]))
      .map((item) => item[c.props.label])
      .join(",");
  }
  c.handleSelectChange && c.handleSelectChange(value, c);
};
const onTreeCancel = (c) => {
  c.visible = false;
  setTimeout(() => {
    c.treeVisible = false;
  }, 200);
};
onMounted(() => {
  formColumns.value.forEach((item, index) => {
    const hide = props.expandConfiguration.includes(index) ? true : false;
    onPorpHide(item, hide);
  });
});
const onPropSelectChange = (value, data, c) => {
  if (value) {
    if (c.propSelectName) {
      saveFormData.value[c.propSelectName] = data[c.propsSelect.label];
    }
    if (c.propSelectAdd) {
      saveFormData.value[c.propSelectAdd] = data[c.propsSelect.keyAdd];
    }
    if (c.onPropSelectChange) {
      c.onPropSelectChange(value, c);
    }
  }
};
const onPropSelectClose = (c) => {
  saveFormData.value[c.parmasKey.propSelectCode] = null;
  saveFormData.value[c.parmasKey.propSelectName] = null;
  saveFormData.value[c.parmasKey.propSelectAdd] = null;
  onCascaderClose(c);
};
const onCascaderChange = (options, value, c) => {
  const argeObj = getAreaInfoByCodesEnhanced(options, value, c);
  c.onCascaderChange && c.onCascaderChange(argeObj);
};
const onCascaderClose = (c) => {
  saveFormData.value[c.parmasKey.provinceName] = null;
  saveFormData.value[c.parmasKey.provinceCode] = null;
  saveFormData.value[c.parmasKey.cityName] = null;
  saveFormData.value[c.parmasKey.cityCode] = null;
  saveFormData.value[c.parmasKey.areaName] = null;
  saveFormData.value[c.parmasKey.areaCode] = null;
  saveFormData.value[c.prop] = [];
};
function getAreaInfoByCodesEnhanced(treeData, codeList, c) {
  if (
    !Array.isArray(treeData) ||
    !Array.isArray(codeList) ||
    codeList.length === 0
  ) {
    return {
      [c.parmasKey.provinceName]: "",
      [c.parmasKey.provinceCode]: codeList[0] || "",
      [c.parmasKey.cityName]: "",
      [c.parmasKey.cityCode]: codeList[1] || "",
      [c.parmasKey.areaName]: "",
      [c.parmasKey.areaCode]: codeList[2] || "",
    };
  }

  const result = {
    [c.parmasKey.provinceName]: "",
    [c.parmasKey.provinceCode]: codeList[0] || "",
    [c.parmasKey.cityName]: "",
    [c.parmasKey.cityCode]: codeList[1] || "",
    [c.parmasKey.areaName]: "",
    [c.parmasKey.areaCode]: codeList[2] || "",
  };

  // 递归查找函数
  const findNode = (nodes, targetCode, level) => {
    if (!nodes || !Array.isArray(nodes)) return null;

    for (const node of nodes) {
      if (node.areaCode === targetCode) {
        // 设置对应级别的名称
        if (level === 0) result[c.parmasKey.provinceName] = node.areaName;
        if (level === 1) result[c.parmasKey.cityName] = node.areaName;
        if (level === 2) result[c.parmasKey.areaName] = node.areaName;
        return node;
      }
    }
    return null;
  };

  let currentNodes = treeData;

  // 逐级查找
  for (let i = 0; i < codeList.length; i++) {
    const code = codeList[i];
    const node = findNode(currentNodes, code, i);

    if (!node) break; // 如果某一级没找到，停止查找

    currentNodes = node.children; // 继续在子节点中查找下一级
  }

  return result;
}
const onPorpHide = (item, open) => {
  item.propHide = open;
  popShow({
    el: item._popEl,
    open,
    item,
  });
};
const isType = (o) =>
  Object.prototype.toString
    .call(o)
    .match(/\[object\s([a-zA-Z0-9]+)\]/)[1]
    .toLowerCase();

const popShow = async ({
  open = true,
  el,
  dir = "vert",
  anim = true,
  item,
  stowHeight = "0px",
}) => {
  isType(item._timer) === "function"
    ? item._timer()
    : clearTimeout(item._timer);
  const keyMap = {
    hori: { size: "offsetWidth", maxSize: "maxWidth" },
    vert: { size: "offsetHeight", maxSize: "maxHeight" },
  };
  const k = keyMap[dir];
  if (!el || !k) return;

  const uiRenderEnd = async () => {
    await new Promise((r) => window.requestAnimationFrame(r));
    await new Promise((r) => window.requestAnimationFrame(r));
    return;
  };
  el.style.transition = anim ? "" : "none";

  if (open) {
    const size = el[k.size];
    el.style[k.maxSize] = "";
    const openSize = el[k.size];
    el.style[k.maxSize] = size + "px";
    await uiRenderEnd();
    el.style[k.maxSize] = openSize === size ? "" : openSize + "px";

    if (openSize === size || !anim) return (el.style[k.maxSize] = "");

    item._timer = () => {
      el.style[k.maxSize] = "";
      el.removeEventListener("transitionend", item._timer);
      item._timer = null;
    };
    el.addEventListener("transitionend", item._timer);
    return;
  }

  el.style[k.maxSize] = el[k.size] + "px";
  await uiRenderEnd();
  el.style[k.maxSize] = stowHeight;
};
const myTabel = ref();
const onAdd = (black, index) => {
  nextTick(async () => {
    if (black.onAdd) {
      black.onAdd(black);
      return;
    }
    const $grid = myTabel.value[index].$refs.xGrid;
    const obj = {};
    obj[black.keepSourceKey] = "";
    if (black.fixedParameter) {
      const fixedParameter = black.fixedParameter;
      for (const key in fixedParameter) {
        obj[key] = saveFormData.value[fixedParameter[key]];
      }
    }
    saveFormData.value[black.prop].unshift(obj);
    const nerow = saveFormData.value[black.prop][0];
    await $grid.setEditCell(nerow, black.keepSourceKey);
  });
};
const handleEditClosed = async (
  row,
  rowIndex,
  resolve,
  reject,
  black,
  xGrid
) => {
  const error = await xGrid.value.fullValidate(row);
  if (error) {
    ElMessage.error(
      `${i18n.global.t("第")}${rowIndex + 1}${i18n.global.t(
        "行！请填写必填字段"
      )}`
    );
    // reject();
    return;
  }
  black.handleEditClosed &&
    black.handleEditClosed(row, rowIndex, resolve, reject, black, xGrid);
};
const employeeSelectionVisible = ref(false);
const propsSelect = ref({});
const onEmpselectFocus = (c) => {
  propsSelect.value = {
    ...c,
    multiple: c.multiple || false,
    currRowKey: c.currRowKey || "id",
    rowKey: c.rowKey || "id",
    currRowServer: c.name
      ? [
          {
            [c.prop]: saveFormData.value[c.prop],
          },
        ]
      : saveFormData.value[c.prop] || [],
    columns: c.columns || [],
  };
  console.log(propsSelect);

  employeeSelectionVisible.value = true;
};
const employeeSelectiSubmit = (value) => {
  if (propsSelect.value.multiple || propsSelect.value.multipleSingle) {
    const data = propsSelect.value.multipleSingle ? [value] : value;
    const arr = [];
    const object = propsSelect.value.props;
    data.forEach((item) => {
      const obj = {};
      for (const key in object) {
        obj[key] = item[object[key]];
      }
      arr.push(obj);
    });
    saveFormData.value[propsSelect.value.prop] = arr;
    if (propsSelect.value.splice) {
      console.log(data);

      saveFormData.value[propsSelect.value.textProp] = data
        .map((item) => {
          return `${item[propsSelect.value.splice]}${
            item[propsSelect.value.bracket]
              ? `(${item[propsSelect.value.bracket] || ""})`
              : ""
          }`;
        })
        .join(",");
    }
    return;
  }
  const object = propsSelect.value.props;
  for (const key in object) {
    saveFormData.value[key] = value[object[key]];
  }
};
const handleClose = (tag, tagIndex, c) => {
  api.default.system.fileUpload.remove(tag.fileId || tag.id).then((res) => {
    saveFormData.value[c.prop].splice(tagIndex, 1);
    ElMessage.success(i18n.global.t("删除成功"));
  });
};
const handleLabelUpload = (c) => {
  fileViewing(c.url, c.rawFile, c.original);
};

const radioChange = (val, c) => {
  if (c.name) {
    saveFormData.value[c.name] = c.options.find(
      (item) => item[c.props.value] === val
    )[c.props.label];
  }
};
const handleRemoteChange = (val, data, c) => {
  if (c.multiple) {
    const arr = [];
    data.forEach((item) => {
      const obj = {};
      if (c.paramsKey) {
        for (const key in c.paramsKey) {
          obj[key] = data[c.paramsKey[key]];
        }
      }
      arr.push(obj);
    });
    saveFormData.value[c.prop] = arr;
  } else {
    if (c.paramsKey) {
      for (const key in c.paramsKey) {
        saveFormData.value[key] = data[c.paramsKey[key]];
      }
    }
  }
  c.handleRemoteChange && c.handleRemoteChange(val, data, c);
};
const handleRemoteClear = (val, c) => {
  if (c.multiple) {
    saveFormData.value[c.prop] = [];
  } else {
    if (c.paramsKey) {
      for (const key in c.paramsKey) {
        saveFormData.value[key] = "";
      }
    }
  }
};
const handleAutocompleteSelect = (val, c) => {
  console.log(val, c);
};
const handleAutocompleteClear = (c) => {};
const handleSelectionChange = (val, black) => {
  black.multipleSelection = val;
};
const onDelete = (black) => {
  ElMessageBox.confirm(
    i18n.global.t("是否确定删除当前选择数据？"),
    i18n.global.t("提示"),
    {
      confirmButtonText: i18n.global.t("确定"),
      cancelButtonText: i18n.global.t("取消"),
      type: "warning",
    }
  )
    .then(() => {
      const ids = black.multipleSelection
        .filter((item) => item.id)
        .map((item) => item.id);
      const rowIds = black.multipleSelection
        .map((item, index) => {
          if (!item.id || !black.onDelete) {
            return index;
          }
          return "del";
        })
        .filter((it) => it !== "del");
      saveFormData.value[black.prop] = saveFormData.value[black.prop].filter(
        (item, index) => !rowIds.includes(index)
      );
      if (ids.length) {
        black.onDelete && black.onDelete(ids);
      }
    })
    .catch(() => {});
};
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let tabelType = true;
      if (myTabel.value) {
        for (let index = 0; index < myTabel.value.length; index++) {
          const tabel = myTabel.value[index];
          const formRow = columnFilters(formColumns.value, tabel.tableId);
          if (formRow?.editRules) {
            const tabelValid = await tabel.validEvent();
            if (tabelValid) {
              tabelType = false;
              let row = null;
              let keep = null;
              for (const key in tabelValid) {
                keep = key;
                row = tabelValid[key][0].row;
                if (row) {
                  break;
                }
              }
              const newRow = saveFormData.value[tabel.tableId].find(
                (item) => item.rowId === row.rowId
              );
              tabel.$refs.xGrid.setEditCell(newRow, keep);
              ElMessage.error(i18n.global.t("列表必填信息不完整请检查"));
              break;
            }
          }
        }
      }

      if (tabelType) emits("submit");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const onTabChange = (val, balck) => {};
// 动态计算表单字段布局
const calculateLayout = () => {
  // 检查formColumns结构是否有效
  if (!formColumns.value || formColumns.value.length === 0) return;

  // 遍历所有columns
  for (
    let columnIndex = 0;
    columnIndex < formColumns.value.length;
    columnIndex++
  ) {
    const column = formColumns.value[columnIndex];
    if (!column.structure || column.structure.length === 0) continue;

    // 遍历所有structure
    for (
      let structureIndex = 0;
      structureIndex < column.structure.length;
      structureIndex++
    ) {
      const structure = column.structure[structureIndex];
      if (!structure.content || structure.content.length === 0) continue;

      const content = structure.content;
      let row = 0;
      let col = 0;

      // 遍历所有字段进行流式布局
      for (let i = 0; i < content.length; i++) {
        const field = content[i];
        // 为每个字段添加唯一的i属性（如果没有）
        if (!field.i) {
          field.i = String(i + 1);
        }

        if (!field.hide) {
          // 设置默认span和计算w值
          const span = field.span || 12;
          field.w = span;
          field.h = 1;

          // 如果当前行放不下，换行
          if (col + field.w > 24) {
            row++;
            col = 0;
          }

          field.x = col;
          field.y = row;
          col += field.w;
        }
      }
    }
  }
};
watch(
  () => formColumns.value,
  () => {
    if (!props.isCalculateLayout) return;
    calculateLayout();
  },
  { immediate: true, deep: true }
);
// 移除未使用的resizeTextarea函数
const emitCloseEvent = () => {
  if (route.query.title) {
    closeTag(route);
  }
  emits("cancel");
};
const listLabelValue = (item, list) => {
  const arr = [];
  list.forEach((e) => {
    item[e] && arr.push(item[e]);
  });
  return arr.join(",");
};
const listButtonAdd = (black) => {
  saveFormData.value[black.prop].push({});
};
const listButtonAddDisabled = (black) => {
  return (
    (saveFormData.value[black.prop]?.length || 0) >=
    (saveFormData.value[black.restriction] || black.restriction || 99999)
  );
};
const listButtonRemove = (black, index) => {
  saveFormData.value[black.prop].splice(index, 1);
};
const viewTabel = (tabelView, columns) => {
  const str = [];
  if (columns.labelKey) {
    for (const key in columns.labelKey) {
      const val = tabelView[key];
      val && str.push(val);
    }
  } else if (columns.listKey) {
    tabelView[columns.field].forEach((item) => {
      str.push(item[columns.listKey]);
    });
  } else {
    const val = columns.valueKey
      ? columns.valueKey[tabelView[columns.field]]
      : tabelView[columns.field];
    val && str.push(val);
  }
  return str.join(columns.joinStr || "-");
};
</script>

<style lang="scss" scoped>
.myform {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .dashed-box {
    position: relative;
    border: 1px dashed #b7b8bd;
    border-radius: 8px;
    background-color: #fff;
  }
  .form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-color: #eb5c20;
    color: rgb(0, 0, 0);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    // border-bottom: 1px dashed #efeff5;
    h3 {
      margin: 0;
      color: #fff;
    }
    .form-nav-left {
      display: flex;
      align-items: center;
    }
    .form-head-tag {
      display: block;
      align-self: flex-start;
      width: 17px;
      height: 28px;
      clip-path: polygon(0 0, 17px 0, 17px 21px, 8.6px 28px, 0 21px);
      background-color: #1504ff;
      margin-top: -10px;
      margin-right: 10px;
    }
    .form-nav-right {
      .el-icon {
        margin-left: auto;
        font-size: 22px;
        color: #fff;
        transition: all 0.3s;
      }
    }
  }
  .myformPopBox {
    padding-bottom: 40px;
  }
  .form-prop {
    overflow: hidden;
    transition: all 0.3s ease;
    // padding-bottom: 40px;
    .form-prop-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      border-bottom: 1px solid #eeee;
      .form-prop-nav-right {
        cursor: pointer;
      }
      h3,
      h4,
      h5 {
        margin: 0;
      }
    }
  }
  .form-buttons {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 24px;
    background: #fff;
    z-index: 100;

    // box-shadow: 0 0 10px 1px #cccccc8a;
  }
}

:deep() .el-form-item--small {
  margin-bottom: 5px;
}
:deep() .el-form-item__error {
  display: none;
}
// :deep() .el-date-editor,
// :deep().el-input__wrapper,
// :deep() .el-select__wrapper {
//   box-shadow: 0 0 0 1px #dcdfe694 inset !important;
// }
:deep() .el-input--small {
  --el-input-height: 26px;
  --el-input-inner-height: 26px;
}
:deep() .el-form-item__label {
  height: 26px;
  line-height: 26px;
}
:deep() .el-select__wrapper {
  line-height: 28px;
  min-height: 28px;
}
:deep() .el-input .is-focused {
  box-shadow: 0 0 0 1px #409eff inset !important;
}

:deep() .el-input .is-focus {
  box-shadow: 0 0 0 1px #409eff inset !important;
}
:deep() .el-select .is-focus {
  box-shadow: 0 0 0 1px #409eff inset !important;
}
:deep() .el-select .is-focused {
  box-shadow: 0 0 0 1px #409eff inset !important;
}
.el-form-item.is-error .el-form-item__content .el-input-tag__wrapper,
.el-form-item.is-error .el-form-item__content .el-input-tag__wrapper.is-focus,
.el-form-item.is-error .el-form-item__content .el-input-tag__wrapper:focus,
.el-form-item.is-error .el-form-item__content .el-input-tag__wrapper:hover,
.el-form-item.is-error .el-form-item__content .el-input__wrapper,
.el-form-item.is-error .el-form-item__content .el-input__wrapper.is-focus,
.el-form-item.is-error .el-form-item__content .el-input__wrapper:focus,
.el-form-item.is-error .el-form-item__content .el-input__wrapper:hover,
.el-form-item.is-error .el-form-item__content .el-select__wrapper,
.el-form-item.is-error .el-form-item__content .el-select__wrapper.is-focus,
.el-form-item.is-error .el-form-item__content .el-select__wrapper:focus,
.el-form-item.is-error .el-form-item__content .el-select__wrapper:hover,
.el-form-item.is-error .el-form-item__content .el-textarea__inner,
.el-form-item.is-error .el-form-item__content .el-textarea__inner.is-focus,
.el-form-item.is-error .el-form-item__content .el-textarea__inner:focus,
.el-form-item.is-error .el-form-item__content .el-textarea__inner:hover {
  box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
}
.vue-draggable-handle {
  position: absolute;
  top: 2px;
  left: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0 8px 8px 0;
  cursor: pointer;
  z-index: 1;
}
//  :deep() .vgl-item__resizer::before {
//   display: none;
// }
// :deep() .vgl-item__resizer {

// }
.list-label-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
  color: #409eff;
}
</style>